<template>
  <div class="login-page">
    <div class="login-container">
      <div class="login-content">
        <!-- Logo区域 -->
        <div class="logo-area">
          <el-icon class="logo-icon"><Monitor /></el-icon>
          <h2>实验室管理系统</h2>
        </div>

        <!-- 登录表单 -->
        <form @submit.prevent="handleLogin" class="login-form">
          <div class="form-item">
            <el-input
              v-model="username"
              placeholder="请输入用户名"
              prefix-icon="User"
              size="large"
              required
            />
          </div>

          <div class="form-item">
            <el-input
              v-model="password"
              type="password"
              placeholder="请输入密码"
              prefix-icon="Lock"
              size="large"
              show-password
              required
            />
          </div>

          <el-button
            type="primary"
            native-type="submit"
            class="login-button"
            size="large"
          >
            登录
          </el-button>
        </form>

        <p v-if="errorMessage" class="error-message">{{ errorMessage }}</p>
      </div>
    </div>
  </div>
</template>

<script>
import { User, Lock, Monitor } from '@element-plus/icons-vue';
import axios from "axios";

export default {
  name: "Login",
  components: {
    Monitor,
  },
  data() {
    return {
      username: "",
      password: "",
      errorMessage: null,
    };
  },
  methods: {
    async handleLogin() {
      this.errorMessage = null; // 清除之前的错误信息
      if (!this.username.trim() || !this.password.trim()) {
        this.errorMessage = "用户名和密码不能为空";
        return;
      }

      try {
        const response = await axios.post("/user/login", {
          username: this.username,
          password: this.password,
        });

        const user = response.data;

        // 调试信息
        console.log("登录成功:", user);

        // 保存用户信息到本地存储
        localStorage.setItem("user", JSON.stringify(user));

        // 根据角色跳转
        if (user.role === "admin") {
          this.$router.push("/admin");
        } else if (user.role === "member") {
          this.$router.push("/member");
        } else {
          this.errorMessage = "角色未定义，无法跳转";
        }
      } catch (error) {
        // 处理错误
        if (error.response && error.response.status === 401) {
          this.errorMessage = "用户名或密码错误";
        } else {
          console.error("登录失败:", error);
          this.errorMessage = "登录失败，请稍后重试";
        }
      }
    },
  },
  setup() {
    return {
      User,
      Lock,
    };
  },
};
</script>

<style scoped>
.login-page {
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(135deg, #e0f2f1 0%, #e3f2fd 100%);
}

.login-container {
  width: 420px;
  padding: 40px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);
}

.logo-area {
  text-align: center;
  margin-bottom: 40px;
}

.logo-icon {
  font-size: 48px;
  color: var(--el-color-primary);
  margin-bottom: 16px;
}

.logo-area h2 {
  font-size: 24px;
  color: #333;
  margin: 0;
  font-weight: 500;
}

.login-form {
  margin-top: 20px;
}

.form-item {
  margin-bottom: 20px;
}

.login-form :deep(.el-input__wrapper) {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
}

.login-button {
  width: 100%;
  height: 44px;
  font-size: 16px;
  border-radius: 8px;
  margin-top: 20px;
  background: linear-gradient(90deg, var(--el-color-primary) 0%, var(--el-color-primary-light-3) 100%);
  border: none;
  transition: transform 0.3s ease;
}

.login-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.error-message {
  color: var(--el-color-danger);
  text-align: center;
  margin-top: 16px;
  font-size: 14px;
}

/* 响应式设计 */
@media (max-width: 480px) {
  .login-container {
    width: 90%;
    padding: 20px;
  }
}
</style>
